@keyframes spin {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(359deg);
    }
}
.button {
    appearance: none;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    box-shadow: none;
    font-size: 1rem;
    height: 2.25em;
    line-height: 1.5;
    padding: calc(.375em - 1px) .75em;
    user-select: none;
    color: #363636;
    white-space: nowrap;
    display: inline-flex;
    background-color: white;
    vertical-align: top;
    position: relative;
    cursor: pointer;

    &.is-info {
        color: #fff;
        border-color: transparent;
        background-color: #209cee;
    }

    &.is-small {
        font-size: .75rem;
    }

    &.is-medium {
        font-size: 1.25rem;
    }

    &.is-large {
        font-size: 1.5rem;
    }

    &.is-hovered, &:hover {
        border-color: gray(181);
    }

    &.is-focused, &:focus {
        border-color: #3273dc;
        box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25);
    }

    &.is-active, &:active {
        border-color: gray(74);
        outline: none;
    }

    &.is-loading {
        color: transparent !important;
        pointer-events: none;
        cursor: default;
        &:after {
            content: '';
            position: absolute;
            top: calc((2.25em - 1em) / 2);
            left: calc((100% - 1em) / 2);
            height: 1em;
            width: 1em;
            border: 2px solid gray(219);
            border-bottom-color: transparent;
            border-right-color: transparent;
            border-radius: .5em;
            animation: 500ms linear 0s infinite spin;
        }
    }

    &.is-static {
        pointer-events: none;
        color: gray(122);
        background-color: whitesmoke;
    }

    & .icon {
        height: 1.5em;
        width: 1.5em;
    }

    & .icon:first-child:last-child {
        margin-left: calc(-0.375em - 1px);
        margin-right: calc(-0.375em - 1px);
    }

    &:focus, &.is-focused, &:active, &.is-active {
        outline: none;
    }
}

